<template>
    <div class="four bodybg2">
        <div class="head">
            <div class="nav_box justify-between">
                <div class="time_left"></div>
                <div class="title_m">大企业税源监控分析应用服务</div>
                <div class="yun_right"></div>
            </div>

            <div class="flex-row">
                <div class="minitit_l flex-row-r">
                    <a href="javascript:;" @click="go('/jsjfgkfxs')" class="minibtn bg01"><span>减税概况</span></a>
                    <a href="javascript:;" @click="go('/fpgks')" class="minibtn bg02 "><span>发票概况</span></a>
                    <a href="javascript:;" @click="go('/ones')" class="minibtn bg02 "><span>税收概况</span></a>
                </div>
                <div class="minitit_r flex-row">
                    <a href="javascript:;" @click="go('/twos')" class="minibtn bg03 "><span>经营概况</span></a>
                    <a href="javascript:;" @click="go('/threes')" class="minibtn bg03 "><span>行业概况</span></a>
                    <a href="javascript:;" @click="go('/fours')" class="minibtn bg04 ved"><span>区域概况</span></a>
                </div>
            </div>
        </div>

        <div class="bkmail justify-between">
            <div class="bk_min">
                <div class="mapbox four">
                    <div class="leboxg">
                        <div class="title four">
                            <div class="mapse flex-row">
                                <div class="txtinp flex-row">
                                    <span class="spansize">起止时间：</span>
                                    <el-date-picker popper-class="sift-data" :append-to-body="false" class="inpcon"
                                        v-model="form.date" type="monthrange" range-separator="至" start-placeholder="起"
                                        end-placeholder="止" value-format="yyyy-MM" :default-value="form.defaultDate">
                                    </el-date-picker>
                                </div>
                                <div class="txtinp flex-row">
                                    <span class="spansize">企业类型：</span>
                                    <el-select class="inpcon2" v-model="form.jtlx" placeholder="请选择"
                                        :popper-append-to-body="false">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                                <a href="javascript:;" class="ashw" id="gotosheng" @click="getData()">查询</a>
                            </div>
                        </div>
                        <div id="map" class="map_shuju" style="height: 840px;">
                            <HeBeiMap />
                        </div>
                        <div class="chart bottom">
                            <div class="biaoti">税收收入（万元）
                            </div>
                            <div class="main" id="echart5" v-loading="loading" element-loading-text="拼命加载中"
                                element-loading-spinner="el-icon-loading"
                                element-loading-background="rgba(0, 0, 0, 0.2)">

                            </div>
                        </div>

                    </div>

                </div>
            </div>

            <div class="bk4_le">
                <!-- 分区域经济类型经营情况 -->
                <div class="box4_con1 rightbg" v-loading="loading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                    <div class="title"><span>分区域经济类型经营情况</span></div>
                    <div class="conform">
                        <div id="echart1" style=" display: block; height: 220px;"></div>
                    </div>
                </div>
                <!-- 分区域成员企业变化情况 -->
                <div class="box4_con1 rightbg" v-loading="loading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                    <div class="title"><span>分区域成员企业变化情况</span></div>
                    <div class="conform">
                        <div class="conform">
                            <div id="echart2" style=" display: block; height: 220px;"></div>
                        </div>
                    </div>
                </div>
                <!-- 分区域风险成果应对情况 -->
                <div class="box4_con1 rightbg" v-loading="loading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                    <div class="title"><span>分区域风险成果应对情况</span></div>
                    <div class="conform">
                        <div class="conform">
                            <div id="echart3" style=" display: block; height: 220px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 地图 -->
        <div id="map-dialog" class="map-dialog">
            <div class="d_main">
                <div class="m_list">
                    <div class="l_item">

                        <div class="d_mainbgc" style="height: 510px;overflow:hidden">
                            <div class="title">{{ mapNsrmc }}</div>
                            <div style="height:470px;overflow-y:auto">
                                <table class="shiqutable" v-loading="maploading">
                                    <tr v-for="(item, key) in mapXzData" :key="key">
                                        <td><span>{{ item.SWJGMC }}:</span>{{ item.SE }}万元</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="d_mainbgb"></div>

                    </div>

                </div>
                <a class="m_close" href="javascript:;"
                    onclick="document.getElementById('map-dialog').style.display = 'none'"></a>
            </div>
        </div>
    </div>
</template>

<script>
import autofit from 'autofit.js'
import { autoScale } from "@/utils/utils"
import * as echarts from "echarts";
let china = require('./json/130000_full.json');
import 'echarts-gl'
import $ from 'jquery';

import { queryQygk } from '@/api/cxtj/qygk'
import { ssgkSwjgxz } from '@/api/cxtj/ssgk'

import HeBeiMap from "@/components/Map/HeBeiMap/index.vue"

export default {
    data() {
        return {
            form: {
                date: [],
                qssj: '',
                jssj: '',
                jtlx: '11',
                defaultDate: []
            },
            options: [
                {
                    value: '11',
                    label: '千户集团'
                }, {
                    value: '2',
                    label: '省局列名'
                }, {
                    value: '3',
                    label: '市局列名'
                }
            ],
            loading: false,
            listJtgkDt: [],
            mapXzData: [],
            mapNsrmc: '',
            maploading: false,
            listFqycyqybhqk: [],
            mapFqyjjlxjyqk: {},
            fxList: []
        }
    },
    mounted() {
        autofit.init({
            dh: 1080,
            dw: 1920,
            el: ".bodybg2",
            resize: true
        })
        var currentDate = new Date();
        var year = currentDate.getFullYear(); // 获取当前年份
        var month = (currentDate.getMonth() + 1) > 9 ? currentDate.getMonth() + 1 : '0' + (currentDate.getMonth() + 1); // 获取当前月份（注意月份是从0开始，所以要加1）

        this.form.defaultDate = [year + '-01', year + '-' + month]
        this.form.date = [year + '-01', year + '-' + month]
        this.getData()



    },
    unmounted() {
        autofit.init()
    },

    methods: {
        getData() {
            this.listJtgkDt = []
            this.mapXzData = []
            this.mapNsrmc = ''
            this.listFqycyqybhqk = []
            this.mapFqyjjlxjyqk = {}
            this.fxList = []
            this.loading = true
            let param = {
                qssj: this.form.date.length > 0 ? this.form.date[0] : this.form.defaultDate[0],
                jssj: this.form.date.length > 0 ? this.form.date[1] : this.form.defaultDate[1],
                jtlx: this.form.jtlx,
            }
            queryQygk(param).then(res => {
                this.loading = false
                if (res.code == 200) {
                    console.log(res)
                    //集团概况
                    this.listJtgkDt = res.data.listJtgkDt.sort((a, b) => a.SE - b.SE)
                    this.listFqycyqybhqk = res.data.listFqycyqybhqk
                    this.mapFqyjjlxjyqk = res.data.mapFqyjjlxjyqk

                    this.fxList = res.data.fxList

                    this.init()
                }
            })
        },
        init() {
            this.qssr()
            // this.mapChart()
            this.fqyjjlx()
            this.fqycyqy()
            this.fqyfxcg()
        },
        qssr() {

            let yAxisData = []
            let seriesData = []
            this.listJtgkDt.forEach(item => {
                yAxisData.push(item.SWJGMC)
                seriesData.push(item.SE)
            })
            let myChart = echarts.init(document.getElementById('echart5'));
            myChart.setOption({
                /*
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  }
                },
                */
                textStyle: {
                    color: '#ffffff' // 文字颜色
                },
                grid: {
                    top: '0%',
                    left: '29%',
                    right: '35%',
                    bottom: '0%',
                    // containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0.9, 0.04],
                    axisLine: { // 控制坐标轴线  
                        show: false // 隐藏轴线  
                    },
                    axisTick: { // 控制刻度线  
                        show: false // 隐藏刻度线  
                    },
                    splitLine: { // 控制网格线  
                        show: false // 隐藏网格线  
                    },
                    axisLabel: { // 控制坐标轴标签  
                        show: false // 
                    }
                },
                yAxis: {
                    // name: '单位：万元',
                    // nameTextStyle: {
                    //   padding: [0, 0, 0, 780]
                    // },
                    type: 'category',
                    data: yAxisData,
                    axisLine: { // 控制坐标轴线  
                        show: false // 隐藏轴线
                    },
                    axisTick: { // 控制刻度线  
                        show: false // 隐藏刻度线  
                    },
                    splitLine: { // 控制网格线  
                        show: false // 隐藏网格线  
                    },
                    axisLabel: { // 控制坐标轴标签  
                        show: true,
                        inside: true,
                        //interval: 40, //横轴信息全部显
                        //splitNumber: 30,
                        textStyle: {
                            color: '#ffffff',
                            // verticalAlign: 'bottom',
                            fontWeight: "bold",
                            fontSize: 16,
                            align: 'right',
                            padding: [0, 0, 0, 0]
                        }
                    }
                },
                series: [{
                    name: '数值',
                    type: 'bar',
                    stack: '总量',
                    barWidth: 16, // 条形的宽度  

                    label: {
                        show: true,
                        position: 'right',
                        fontSize: 16,
                        color: "#fff",
                        padding: 10
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                            offset: 0,
                            color: '#72DEFF'
                        },
                        {
                            offset: 1,
                            color: '#0C68FC'
                        }
                        ]),
                        borderRadius: [0, 10, 10, 0],
                    },
                    cursor: "default",
                    data: seriesData
                }],
            });

        },
        mapChart() {
            let self = this
            echarts.registerMap('china', china);
            let chart = echarts.init(document.getElementById('map'));
            chart.setOption({
                series: [{
                    type: 'map3D',
                    map: 'china',
                    top: '-8%',    // 顶部的空间大小
                    bottom: '20%', // 底部的空间大小
                    left: '-30%',   // 左侧的空间大小
                    right: '-10%',  // 右侧的空间大小
                    itemStyle: {
                        color: 'rgba(21, 46, 171, 0.5)',
                        opacity: 1, // 图形的不透明度 [ default: 1 ]
                        borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
                        borderColor: "#9AB4FF", // 图形描边的颜色。[ default: #333 ]
                    },
                    label: {
                        // 标签的相关设置
                        show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
                        // formatter: function (params) {
                        //   return params.name ? params.name : " ";
                        // },
                        position: "bottom",
                        textStyle: {
                            // 标签的字体样式
                            color: "#fff", // 地图初始化区域字体颜色
                            fontSize: 12, // 字体大小
                            opacity: 1,
                        },
                    },

                    /*
                    emphasis: {
                      // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式)
                      label: {
                        // label 高亮时的配置
                        show: true,
                        textStyle: {
                          color: "#fff", // 高亮时标签颜色变为 白色
                          fontSize: 15, // 高亮时标签字体 变大
                        },
                      },
                      itemStyle: {
                        // itemStyle 高亮时的配置
                        areaColor: "#66ffff", // 高亮时地图板块颜色改变
                      },
                    },
                    */
                    groundPlane: {
                        // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
                        show: false, // 是否显示地面。[ default: false ]
                        color: "#aaa", // 地面颜色。[ default: '#aaa' ]
                    },
                    light: {
                        // 光照相关的设置。在 shading 为 'color' 的时候无效。  光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
                        main: {
                            // 场景主光源的设置，在 globe 组件中就是太阳光。
                            color: "#3D94CE", // 主光源的颜色。[ default: #fff ]
                            intensity: 2, // 主光源的强度。[ default: 1 ]
                            shadow: false, // 主光源是否投射阴影。默认关闭。    开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
                            shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
                            alpha: 30, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
                            beta: 80, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
                        },
                        ambient: {
                            // 全局的环境光设置。
                            color: "#fff", // 环境光的颜色。[ default: #fff ]
                            intensity: 0.5, // 环境光的强度。[ default: 0.2 ]
                        },
                    },

                    viewControl: {
                        // 用于鼠标的旋转，缩放等视角控制。
                        projection: "perspective", // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
                        autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
                        autoRotateDirection: "cw", // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
                        autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
                        autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
                        damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
                        rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。	rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
                        zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
                        panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
                        panMouseButton: "left", // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                        rotateMouseButton: "left", // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                        distance: 160, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
                        minDistance: 30, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
                        maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
                        alpha: 45, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
                        beta: -10, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
                        minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                        maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                        minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                        maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
                        center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
                        animation: true, // 是否开启动画。[ default: true ]
                        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                        animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
                    },
                }]
            });
            chart.off('click');
            chart.on("click", (e) => {
                console.log(e)
                self.mapXzData = []
                if (self.listJtgkDt.length > 0) {
                    let swjgdm = ''
                    for (let i = 0; i < self.listJtgkDt.length; i++) {
                        if (e.data.name == self.listJtgkDt[i].SWJGMC) {
                            swjgdm = self.listJtgkDt[i].SWJGDM
                        }
                    }
                    let param = {
                        swjgDm: swjgdm,
                        qssj: self.form.date.length > 0 ? self.form.date[0] : self.form.defaultDate[0],
                        jssj: self.form.date.length > 0 ? self.form.date[1] : self.form.defaultDate[1],
                        jtlx: self.form.jtlx,
                    }
                    self.maploading = true
                    self.mapNsrmc = e.data.name
                    ssgkSwjgxz(param).then(res => {
                        self.maploading = false
                        if (res.code == 200) {
                            console.log(res)
                            self.mapXzData = res.data
                        }
                    })
                    console.log(swjgdm)
                    let dialog = document.getElementById('map-dialog')
                    dialog.style.display = 'flex'
                }
            });
        },



        fqyjjlx() {


            let myChart = echarts.init(document.getElementById('echart1'));
            let xAxisData = [];
            let data1 = [];
            let data2 = [];
            let data3 = [];
            let area = []
            let dataType = []
            for (const key in this.mapFqyjjlxjyqk) {
                area.push(key)
                let objects = this.mapFqyjjlxjyqk[key]
                for (let i in this.mapFqyjjlxjyqk[key]) {
                    dataType.push(i)
                }

            }

            const uniqueArr = Array.from(new Set(dataType));
            let dataArr = []
            for (let j = 0; j < uniqueArr.length; j++) {
                dataArr.push([])
                for (const key in this.mapFqyjjlxjyqk) {
                    let objects = this.mapFqyjjlxjyqk[key]
                    for (let i in this.mapFqyjjlxjyqk[key]) {
                        console.log(uniqueArr[j])
                        if (uniqueArr[j] == i) {
                            dataArr[j].push(this.mapFqyjjlxjyqk[key][i])
                        }
                    }

                }
            }
            console.log(dataArr, 'dataArr')
            console.log(area)

            var emphasisStyle = {
                itemStyle: {
                    shadowBlur: 3,
                    shadowColor: 'rgba(0,0,0,0.3)'
                }
            };

            myChart.setOption({
                color: ['#0091ff', '#44cbd7', '#b620e0'],
                legend: {
                    data: uniqueArr,
                    textStyle: {
                        color: '#ffffff' // 文字颜色
                    },
                },

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        var res = params[0].name + '<br/>';
                        for (var i = 0, l = params.length; i < l; i++) {
                            res += params[i].seriesName + ' : ' + params[i].value + ' 万元<br/>';
                        }
                        return res;
                    }
                },
                xAxis: {
                    data: area,
                    // name: 'X Axis',
                    axisLine: { onZero: true, lineStyle: { color: "#2d3b61" } },
                    splitLine: { show: false },
                    splitArea: { show: false },
                    axisLabel: {
                        show: true,
                        color: '#ffffff',
                        fontSize: 12
                    }
                },
                yAxis: {
                    name: '单位：万元',
                    type: "value",
                    nameTextStyle: {
                        color: "#fff",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: { color: "#2d3b61" }
                    },
                    axisLabel: { // 控制坐标轴标签  
                        show: true,
                        inside: false,
                        interval: 1000, //横轴信息全部显
                        // splitNumber: 30,
                        textStyle: {
                            color: '#ffffff',
                            // verticalAlign: 'bottom',
                            fontSize: 12,
                            align: 'right',
                            // padding: [0, 0, 0, 0]
                        },
                        formatter: '{value}.00'
                    }
                },
                grid: {
                    top: '40',
                    left: '0%',
                    right: '30',
                    bottom: '0',
                    containLabel: true
                },
                series: [
                    {
                        name: uniqueArr[0],
                        type: 'bar',
                        stack: 'one',
                        barWidth: "20%",
                        emphasis: emphasisStyle,
                        data: dataArr[0]
                    },
                    {
                        name: uniqueArr[1],
                        type: 'bar',
                        stack: 'one',
                        barWidth: "20%",
                        emphasis: emphasisStyle,
                        data: dataArr[1]
                    },
                    {
                        name: uniqueArr[2],
                        type: 'bar',
                        stack: 'one',
                        barWidth: "20%",
                        emphasis: emphasisStyle,
                        data: dataArr[2]
                    }
                ]
            });



        },


        fqycyqy() {


            let myChart = echarts.init(document.getElementById('echart2'));
            let xAxisData = [];
            let data1 = [];
            let data2 = [];
            // let data3 = [];
            let area = []
            for (let i = 0; i < this.listFqycyqybhqk.length; i++) {
                xAxisData.push(this.listFqycyqybhqk[i].SWJGMC);
                data2.push({ value: this.listFqycyqybhqk[i].XZQY });
                data1.push({ value: this.listFqycyqybhqk[i].ZXQY });
                // data3.push({ value: +(Math.random() * 200004).toFixed(2) });
                // data4.push(+Math.random().toFixed(2));
            }


            var emphasisStyle = {
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0,0,0,0.3)'
                }
            };

            myChart.setOption({
                color: ['#678ab4', '#00d480'],
                legend: {
                    data: ['注销企业', '新增企业'],
                    textStyle: {
                        color: '#ffffff' // 文字颜色
                    },
                },

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        var res = params[0].name + '<br/>';
                        for (var i = 0, l = params.length; i < l; i++) {
                            res += params[i].seriesName + ' : ' + params[i].value + ' 户<br/>';
                        }
                        return res;
                    }
                },
                xAxis: {
                    data: xAxisData,
                    // name: 'X Axis',
                    axisLine: { onZero: true, lineStyle: { color: "#2d3b61" } },
                    splitLine: { show: false },
                    splitArea: { show: false },
                    axisLabel: {
                        show: true,
                        color: '#ffffff',
                        fontSize: 12
                    }
                },
                yAxis: {
                    name: '单位：户',
                    type: "value",
                    nameTextStyle: {
                        color: "#fff",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: { color: "#2d3b61" }
                    },
                    axisLabel: { // 控制坐标轴标签  
                        show: true,
                        inside: false,
                        interval: 1000, //横轴信息全部显
                        // splitNumber: 30,
                        textStyle: {
                            color: '#ffffff',
                            // verticalAlign: 'bottom',
                            fontSize: 12,
                            align: 'right',
                            // padding: [0, 0, 0, 0]
                        },
                        formatter: '{value}'
                    }
                },
                grid: {
                    top: '40',
                    left: '2%',
                    right: '30',
                    bottom: '0',
                    containLabel: true
                },
                series: [
                    {
                        name: '注销企业',
                        type: 'bar',
                        stack: 'one',
                        barWidth: "20%",
                        emphasis: emphasisStyle,
                        data: data1
                    },
                    {
                        name: '新增企业',
                        type: 'bar',
                        stack: 'one',
                        barWidth: "20%",
                        emphasis: emphasisStyle,
                        data: data2
                    },
                    // {
                    // 	name: '外资企业',
                    // 	type: 'bar',
                    // 	stack: 'one',
                    // 	barWidth: "20%",
                    // 	emphasis: emphasisStyle,
                    // 	data: data3
                    // }
                ]
            });


        },
        fqyfxcg() {

            let myChart = echarts.init(document.getElementById('echart3'));
            let xAxisData = [];
            let data1 = [];
            let area = []
            console.log(this.fxList)
            if (this.fxList.length > 0) {
                for (let i = 0; i < this.fxList.length; i++) {
                    xAxisData.push(this.fxList[i].SWJGMC);
                    data1.push({ value: this.fxList[i].JE });
                    // data4.push(+Math.random().toFixed(2));
                }
            } else {
                xAxisData = []
                data1 = []
            }
            var emphasisStyle = {
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0,0,0,0.3)'
                }
            };

            myChart.setOption({
                color: ['#00b5a6'],
                legend: {
                    data: ['风险数量'],
                    textStyle: {
                        color: '#ffffff' // 文字颜色
                    },
                },

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        var res = params[0].name + '<br/>';
                        for (var i = 0, l = params.length; i < l; i++) {
                            res += params[i].seriesName + ' : ' + params[i].value + ' 万元<br/>';
                        }
                        return res;
                    }
                },
                xAxis: {
                    data: xAxisData,
                    // name: 'X Axis',
                    axisLine: { onZero: true, lineStyle: { color: "#2d3b61" } },
                    splitLine: { show: false },
                    splitArea: { show: false },
                    axisLabel: {
                        show: true,
                        color: '#ffffff',
                        fontSize: 12
                    }
                },
                yAxis: {
                    name: '单位：万元',
                    type: "value",
                    nameTextStyle: {
                        color: "#fff",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: { color: "#2d3b61" }
                    },
                    axisLabel: { // 控制坐标轴标签  
                        show: true,
                        inside: false,
                        interval: 1000, //横轴信息全部显
                        // splitNumber: 30,
                        textStyle: {
                            color: '#ffffff',
                            // verticalAlign: 'bottom',
                            fontSize: 12,
                            align: 'right',
                            // padding: [0, 0, 0, 0]
                        },
                        formatter: '{value}'
                    }
                },
                grid: {
                    top: '40',
                    left: '0%',
                    right: '30',
                    bottom: '0',
                    containLabel: true
                },
                series: [
                    {
                        name: '风险任务成效',
                        type: 'bar',
                        stack: 'one',
                        barWidth: "20%",
                        emphasis: emphasisStyle,
                        data: data1
                    }
                ]
            });



        },
        go(name) {
            this.$router.push(name)
        },
    },
    components: { HeBeiMap }
}
</script>


<style lang="scss" scoped>
@import '~@/assets/styles/css/common.css';
@import '~@/assets/styles/css/index.css';
@import '~@/assets/styles/css/jquery-ui.css';

::v-deep {
    .el-range-input {
        color: #fff;
    }

    .el-input__inner {
        border: none;
        color: #fff;
        background: transparent;
    }

    .el-select-dropdown {
        background-color: #1f3680;
        border: 1px solid #1f92ff !important;
        border-radius: 3px;
    }

    // border: 1px solid #003eff;
    // background: #007fff;
    // font-weight: normal;
    .el-select-dropdown__item {
        color: #fff;

        &.selected {
            color: #003eff;
        }

        &.hover {
            background: #007fff;
        }
    }

    .el-picker-panel {
        background-color: #1f3680;
    }

    .el-month-table td.in-range div,
    .el-month-table td.in-range div:hover {
        background-color: #007fff;
        color: #fff;
    }

    //     .el-month-table td.end-date div, .el-month-table td.start-date div {
    //       color:#007fff;
    // }
    .el-date-table td.in-range div,
    .el-date-table td.in-range div:hover,
    .el-date-table.is-week-mode .el-date-table__row.current div,
    .el-date-table.is-week-mode .el-date-table__row:hover div {
        background-color: #007fff;
        color: #fff;
    }

    .el-date-table th,
    .el-picker-panel__icon-btn {
        color: #fff;
    }

    .el-date-table td.today span {
        color: #003eff;
    }

    .el-month-table td .cell {
        color: #fff;
    }

    .el-month-table td.today .cell {
        color: #003eff;
    }

    .el-date-range-picker__header div {
        color: #fff;
    }

    .el-popper[x-placement^='bottom'] .popper__arrow {
        border-bottom-color: #1f3680;

        &::after {
            border-bottom-color: #1f3680;
        }
    }
}
</style>